{% load my_tags_filters %}
{% load static %}

<nav class="navbar navbar-inverse navbar-custom">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="{% url 'main:attraction_list' %}">
                <i class="fa fa-map-marker"></i> 旅游舆情监测
            </a>
        </div>

        {% get_scenic_categories as categories %}  <!-- 使用自定义标签 -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="{% if request.path == '/' %}active{% endif %}">
                    <a href="{% url 'main:attraction_list' %}">
                        <i class="fa fa-home"></i> 首页
                    </a>
                </li>

                <!-- 景点分类下拉菜单 -->
                {% for category in categories %}
                    <li class="dropdown {% if category.pk in request.path %}active{% endif %}">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-folder"></i> {{ category.name }} <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            {% for child in category.children.all %}
                                <li>
                                    <a href="{% url 'main:attraction_by_category' child.pk %}"
                                       class="d-flex justify-content-between align-items-center">
                                        <span>{{ child.name }}</span>
                                        <span class="badge badge-primary">{{ child.touristattraction_set.count }}</span>
                                    </a>
                                </li>
                            {% empty %}
                                <li><a href="{% url 'main:attraction_by_category' category.pk %}"
                                       class="d-flex justify-content-between align-items-center">
                                    <span>查看全部</span>
                                    <span class="badge badge-primary">{{ category.touristattraction_set.count }}</span>
                                </a></li>
                            {% endfor %}
                        </ul>
                    </li>
                {% endfor %}
                <!-- 其他菜单项保持不变 -->
                <!-- 舆情分析菜单 -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="fa fa-line-chart"></i> 舆情分析 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url 'main:sentiment_analysis' %}"><i class="fa fa-pie-chart"></i> 情感分析</a>
                        </li>
                        <li><a href="{% url 'main:hot_rank' %}"><i class="fa fa-trophy"></i> 热度排行榜</a></li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'main:sentiment_best' %}">
                                <i class="fas fa-trophy"></i> 情感最佳
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 搜索框 -->
            <form class="navbar-form navbar-left" action="{% url 'main:attraction_search' %}" method="get">
                <div class="form-group">
                    <input type="text" name="q" class="form-control" placeholder="搜索景点名称、地点...">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

            <!-- 用户菜单 -->
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    {% if request.user.is_staff %}
                        <li><a href="{% url 'admin:index' %}"><i class="fa fa-cog"></i> 管理后台</a></li>
                    {% endif %}

                    <li><a href="{% url 'users:attraction_create' %}">创建景点</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            {% if user.avatar %}
                                <img src="{{ user.avatar.url }}" alt="头像"
                                     style="width:20px;height:20px;border-radius:50%;margin-right:5px;">
                            {% else %}
                                <i class="fa fa-user"></i>
                            {% endif %}
                            {{ request.user.username }} <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'users:center' %}"><i class="fa fa-user-circle"></i> 个人中心</a></li>
                            <li><a href="{% url 'users:attraction_list' %}"><i class="fa fa-list"></i> 我的景点</a></li>
                            <li><a href="{% url 'collect:my_collections' %}"><i class="fa fa-heart"></i> 我的收藏</a>
                            </li>
                            <li><a href="{% url 'users:cha' %}"><i class="fa fa-key"></i> 修改密码</a></li>
                            <li><a href="{% url 'users:chahead' %}"><i class="fa fa-camera"></i> 修改头像</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'users:logout' %}"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="{% url 'users:log' %}"><i class="fa fa-sign-in"></i> 登录</a></li>
                    <li><a href="{% url 'users:reg' %}"><i class="fa fa-user-plus"></i> 注册</a></li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<style>
    /* === 修复底部栏问题的关键CSS === */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }


    /* 导航栏美化 - 旅游主题配色 */
    .navbar-custom {
        background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    }


    .main-footer {
        background: linear-gradient(135deg, #1a237e, #283593);
        color: white;
        padding: 40px 0 20px;
        border-top: 5px solid #1e88e5;
        margin-top: auto; /* 关键：让底部栏始终在底部 */
        flex-shrink: 0; /* 关键：防止底部栏被压缩 */
        width: 100%;
    }

    /* 导航栏美化 - 旅游主题配色 */
    .navbar-custom {
        background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
        border: none;
        border-radius: 0;
        margin-bottom: 0;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
        border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-brand {
        color: #fff !important;
        font-weight: bold;
        font-size: 20px;
        padding: 15px;
    }

    .navbar-brand:hover {
        color: #e3f2fd !important;
    }

    .navbar-nav > li > a {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        transition: all 0.3s ease;
        padding: 15px 20px;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

    .navbar-nav > .active > a {
        background-color: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        font-weight: 600;
    }

    /* 下拉菜单美化 */
    .dropdown-menu {
        border: none;
        border-radius: 8px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
        min-width: 200px;
    }

    .dropdown-menu > li > a {
        padding: 10px 15px;
        color: #333;
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-menu > li > a:hover {
        background: linear-gradient(135deg, #1e88e5, #0d47a1);
        color: white;
        transform: translateX(5px);
    }

    /* 徽章样式 */
    .badge {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        font-size: 10px;
        padding: 3px 6px;
    }

    /* 搜索框美化 */
    .navbar-form {
        margin: 8px 15px;
    }

    .navbar-form .form-control {
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 25px;
        padding: 6px 15px;
    }

    .navbar-form .form-control:focus {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .navbar-form .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .navbar-form .btn-default {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        border-radius: 25px;
        margin-left: 5px;
        padding: 6px 15px;
        transition: all 0.3s ease;
    }

    .navbar-form .btn-default:hover {
        background: rgba(255, 255, 255, 0.3);
        color: white;
        transform: translateY(-1px);
    }

    /* 创建景点按钮美化 */
    .navbar-nav > li > a[href*="attractions_create"] {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        margin: 8px 5px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .navbar-nav > li > a[href*="attractions_create"]:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* 管理后台按钮 */
    .navbar-nav > li > a[href*="admin"] {
        background: rgba(255, 193, 7, 0.2);
        border-radius: 20px;
        margin: 8px 5px;
        border: 1px solid rgba(255, 193, 7, 0.3);
    }

    .navbar-nav > li > a[href*="admin"]:hover {
        background: rgba(255, 193, 7, 0.3);
    }

    /* 用户头像 */
    .navbar-nav .dropdown-toggle img {
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    /* 底部栏样式 - 旅游主题 */
    .main-footer {
        background: linear-gradient(135deg, #1a237e, #283593);
        color: white;
        padding: 40px 0 20px;
        border-top: 5px solid #1e88e5;
        margin-top: auto; /* 关键：让底部栏始终在底部 */
        flex-shrink: 0; /* 关键：防止底部栏被压缩 */
        width: 100%;
    }

    .footer-section h5 {
        color: #64b5f6;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .footer-section p {
        color: #bbdefb;
        line-height: 1.6;
    }

    .footer-section a {
        color: #e3f2fd;
        text-decoration: none;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .footer-section a:hover {
        color: #64b5f6;
        text-decoration: none;
    }

    .footer-section a i {
        margin-right: 8px;
        width: 16px;
    }

    .social-links {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .social-link:hover {
        background: #64b5f6;
        transform: translateY(-2px);
        color: white;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .navbar-form {
            margin: 10px 15px;
            width: calc(100% - 30px);
            display: flex;
        }

        .navbar-form .form-group {
            flex: 1;
            margin-right: 5px;
        }

        .navbar-form .btn {
            width: auto;
        }

        .navbar-nav > li > a {
            padding: 12px 15px;
        }

        .footer-section {
            margin-bottom: 30px;
            text-align: center;
        }

        .social-links {
            justify-content: center;
        }
    }
</style>

<!-- 确保引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    {% block content %}
    {% endblock %}
</div>

<!-- 底部栏放在content块外面 -->
<footer class="main-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 footer-section">
                <h5><i class="fa fa-map-marker"></i> 旅游舆情监测系统</h5>
                <p>实时监测旅游景点舆情，分析用户情感倾向，为旅游决策提供数据支持。</p>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
                    <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
                    <a href="#" class="social-link"><i class="fa fa-qq"></i></a>
                </div>
            </div>
            <div class="col-md-2 footer-section">
                <h5>快速链接</h5>
                <ul class="list-unstyled">
                    <li><a href="{% url 'main:attraction_list' %}"><i class="fa fa-home"></i> 首页</a></li>
                    <li><a href="{% url 'main:sentiment_analysis' %}"><i class="fa fa-line-chart"></i> 情感分析</a></li>
                    <li><a href="{% url 'main:hot_rank' %}"><i class="fa fa-trophy"></i> 热度排行</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-section">
                <h5>热门分类</h5>
                <ul class="list-unstyled">
                    {% for category in categories|slice:":3" %}
                        <li><a href="{% url 'main:attraction_by_category' category.pk %}"><i
                                class="fa fa-bookmark"></i> {{ category.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-md-3 footer-section">
                <h5>帮助支持</h5>
                <ul class="list-unstyled">
                    <li><a href="#"><i class="fa fa-question-circle"></i> 使用帮助</a></li>
                    <li><a href="#"><i class="fa fa-shield"></i> 隐私政策</a></li>
                    <li><a href="#"><i class="fa fa-file-text"></i> 服务条款</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-6">
                <p class="text-muted">&copy; 2024 旅游舆情监测系统. 保留所有权利.</p>
            </div>
            <div class="col-md-6 text-right">
                <p class="text-muted">数据驱动旅游决策</p>
            </div>
        </div>
    </div>
</footer>
{% include "base/base.html" %}
{% block css %}
{% endblock %}

{% block js %}
{% endblock %}